<template>
  <div class="operate">
    <!-- 在线房源 / 当月成交量 / 当月成交额 / 线上平台 -->
    <div class="plate">
      <!-- 在线房源 -->
      <view-item class="room">
        <div slot="itemData" class="itemData">
          <div class="top">
            <i class="bossVersion">&#xe608;</i>
            <span>在线房源</span>
          </div>
          <div class="bot">
            <div class="li">
              <p>可租</p>
              <p class="inline-flex-ib">
                1,879
                <i class="units">套</i>
              </p>
            </div>
            <div class="li">
              <p>在售</p>
              <p class="inline-flex-ib">
                97
                <i class="units">套</i>
              </p>
            </div>
            <div class="li">
              <p>房源增长率</p>
              <p class="inline-flex-ib">
                6
                <i class="units sign">%</i>
              </p>
            </div>
          </div>
        </div>
      </view-item>
      <!-- 当月成交量 -->
      <view-item class="dealAmount">
        <div slot="itemData" class="itemData">
          <div class="top">
            <i class="bossVersion">&#xe606;</i>
            <span>当月成交量</span>
          </div>
          <div class="bot">
            <div class="li">
              <p>可租</p>
              <p class="inline-flex-ib">
                3
                <i class="units">套</i>
              </p>
            </div>
            <div class="li">
              <p>在售</p>
              <p class="inline-flex-ib">
                117
                <i class="units">套</i>
              </p>
            </div>
            <div class="li">
              <p>房源增长率</p>
              <p class="inline-flex-ib">
                62
                <i class="units">套</i>
              </p>
            </div>
            <div class="li">
              <p>房源增长率</p>
              <p class="inline-flex-ib">
                5
                <i class="units">套</i>
              </p>
            </div>
          </div>
        </div>
      </view-item>
      <div class="layered">
        <!-- 当月成交额 -->
        <view-item class="dealQuota">
          <div slot="itemData">
            <div class="top">
              <p class="txt">
                <i class="bossVersion">&#xe60a;</i>
                <span>当月成交额</span>
              </p>
              <p class="num inline-flex-ib">
                95,763
                <i class="units">万元</i>
              </p>
            </div>
            <div class="bot">
              <p class="txt">同比上月</p>
              <p class="num inline-flex-ib">
                1
                <i class="units sign">%</i>
                <i class="rise"></i>
              </p>
            </div>
          </div>
        </view-item>
        <!-- 线上平台 -->
        <view-item class="onLine">
          <div slot="itemData">
            <div class="top">
              <p class="txt">
                <i class="bossVersion">&#xe60b;</i>
                <span>线上平台</span>
              </p>
              <p class="title">累计月访问</p>
              <p class="num inline-flex-ib">
                {{totalData.dayWebsiteVisitsRate}}
                <i class="units">人次</i>
              </p>
            </div>
            <div class="bot">
              <div class="day">
                <p class="txt">单日</p>
                <p class="num inline-flex-ib">
                  {{totalData.dayWebsiteVisitsVolume}}
                  <i class="units">人次</i>
                </p>
              </div>
              <div class="rote">
                <p class="txt">增长率</p>
                <p class="num inline-flex-ib">
                  {{totalData.dayWebsiteVisitsRate}}
                  <i class="units sign">%</i>
                </p>
              </div>
            </div>
          </div>
        </view-item>
      </div>
    </div>
    <!-- 获客渠道分布 -->
    <div class="channel">
      <item-title>
        <span slot="txt" class="txt">获客渠道分布</span>
      </item-title>
      <view-item class="chartItem">
        <div slot="itemData" class="itemData">
          <div class="chartTips">单位:套</div>
          <bar-chart-pile-up v-model="channelData" :option="channelOption"></bar-chart-pile-up>
        </div>
      </view-item>
    </div>
    <!-- 团队构成 -->
    <div class="team">
      <item-title>
        <span slot="txt" class="txt">团队构成</span>
      </item-title>
      <view-item class="chartItem">
        <div slot="itemData" class="itemData">
          <div class="left">
            <div class="chartTips">单位:人</div>
            <pie-chart v-model="teamComposition" :option="shareOption"></pie-chart>
          </div>
          <em></em>
          <div class="right">
            <p>点击左边各项
              <br>以显示明细
            </p>
          </div>
        </div>
      </view-item>
    </div>
    <!-- 业务员人均劳效 -->
    <div class="salesman">
      <item-title>
        <span slot="txt" class="txt">业务员人均劳效</span>
      </item-title>
      <view-item class="chartItem">
        <div slot="itemData" class="itemData">
          <div class="chartTips">单位:万元/人</div>
          <line-chart v-model="fatigueEffectArr" :option="userVisitsArrOption"></line-chart>
        </div>
      </view-item>
    </div>
    <!-- 门店分布 -->
    <div class="distribution">
      <item-title>
        <span slot="txt" class="txt">门店分布</span>
      </item-title>
      <view-item class="chartItem">
        <div slot="itemData" class="itemData">
          <div class="left">
            <div class="chartTips">单位:家</div>
            <pie-chart v-model="distributionOfStores" :option="shareOption"></pie-chart>
          </div>
          <em></em>
          <div class="right">
            <p>点击左边各项
              <br>以显示明细
            </p>
          </div>
        </div>
      </view-item>
    </div>
    <!-- 门店经营 -->
    <div class="operate">
      <item-title>
        <span slot="txt" class="txt">门店经营</span>
      </item-title>
      <view-item class="chartItem">
        <div slot="itemData" class="itemData">
          <div class="chartTips">单位:家</div>
          <bar-chart v-model="storeManagementArr" :option="eachCompanyOption"></bar-chart>
        </div>
      </view-item>
    </div>
    <!-- 收入构成 -->
    <div class="income">
      <item-title>
        <span slot="txt" class="txt">收入构成</span>
      </item-title>
      <view-item class="chartItem">
        <div slot="itemData" class="itemData">
          <div class="left">
            <div class="chartTips">单位:万元</div>
            <pie-chart v-model="incomeComposition" :option="incomeOption"></pie-chart>
          </div>
          <em></em>
          <div class="right">
            <p>点击左边各项
              <br>以显示明细
            </p>
          </div>
        </div>
      </view-item>
    </div>
  </div>
</template>

<script>
import barChart from "@/components/Chart/barChart";
import lineChart from "@/components/Chart/lineChart";
import pieChart from "@/components/Chart/pieChart";
import barChartPileUp from "@/components/Chart/barChartPileUp";
import itemTitle from "@/components/bossVersion/itemTitle";
import viewItem from "@/components/bossVersion/viewItem";
import { GetOfficialWebsiteVisits } from "@/api/bossVersion/FangLianHangForZH";
export default {
  components: {
    barChart,
    lineChart,
    pieChart,
    barChartPileUp,
    itemTitle,
    viewItem
  },
  data() {
    return {
      incomeOption: {
        color: ["#48e5ff", "#f0bd26", "#28e787", "#ff3e9a", "#FF7145"],
        radius: ["35%", "55%"],
        center: ["50%", "60%"],
        // roseType: "radius",
        startAngle: 250,
        formatter: function(value) {
          return "{value|" + value.name + "}";
        },
        hidePieMargin: true,
        showLine: true,
        showLabel: true,
        legend: {
          show: false
        }
      },
      incomeComposition: [], // 收入构成
      totalData: {
        dayWebsiteVisitsRate: 0,
        dayWebsiteVisitsVolume: 0,
        monthWebsiteVisitsVolume: 0
      },
      teamComposition: [], // 团队构成
      storeManagementArr: [], // 门店经营
      eachCompanyOption: {
        // 应收账款 chart option
        barWidth: 35,
        startColor: "#28E787",
        endColor: "#009245",
        color: "#28E787",
        grid: {
          top: "20%"
        },
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        },
        // showUnit: true,
        unit: "%"
      },
      distributionOfStores: [], // 门店分布
      fatigueEffectArr: [], // 业务员人均劳效
      userVisitsArrOption: {
        grid: {
          top: "20%",
          left: "12%",
          width: "90%",
          height: "50%"
        },
        showSymbol: "none",
        label: {
          show: false
        },
        xAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 45,
            interval: 0,
            rich: {
              // x轴富文本样式
              value: {
                color: "#48e5ff"
              }
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(255,113,69,0.5)"
            }
          },
          axisLabel: {
            color: "#48e5ff"
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(47, 240, 210, 0.2)",
              type: "dashed"
            }
          }
        },
        startColor: "rgba(255,113,69,0.3)",
        endColor: "rgba(255,113,69,0.1)",
        color: "#FF7145"
      },
      shareOption: {
        color: ["#48e5ff", "#f0bd26", "#28e787", "#ff3e9a", "#FF7145"],
        radius: ["35%", "55%"],
        center: ["50%", "50%"],
        // roseType: "radius",
        startAngle: 250,
        formatter: function(value) {
          return "{value|" + value.name + "}";
        },
        hidePieMargin: true,
        showLine: true,
        showLabel: true,
        legend: {
          show: false
        }
      },
      channelData: [], // 获客渠道分布
      channelOption: {
        exchange: true,
        grid: {
          width: "90%",
          height: "50%",
          top: "20%",
          left: "12%"
        },
        legend: {
          top: -5,
          right: 0,
          icon: "rect",
          textStyle: {
            color: "#48e5ff"
          }
        },
        xAxis: {
          axisLabel: {
            rotate: 45
          }
        },
        color: ["#ff7145", "#48e5ff", "#ff7145"]
      }
    };
  },
  mounted() {
    this.setData();
    this.GetTotalData();
  },
  methods: {
    // 上部总数据

    async GetTotalData() {
      const p = {
        cityId: ""
      };
      try {
        var res = await GetOfficialWebsiteVisits(p);
        if (res.data.code === "0") {
          this.$set(this, "totalData", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    setData() {
      var incomeComposition = [
        { name: "装修", value: 9, percent: "10.47" },
        { name: "二手房", value: 14, percent: "16.28" },
        { name: "新房", value: 8, percent: "9.30" },
        { name: "金融", value: 33, percent: "38.37" }
      ];
      this.$set(this, "incomeComposition", incomeComposition);
      var teamComposition = [
        { name: "经纪人", value: 9, percent: "10.47" },
        { name: "店长", value: 14, percent: "16.28" },
        { name: "公司管理", value: 8, percent: "9.30" },
        { name: "其他", value: 33, percent: "38.37" }
      ];
      this.$set(this, "teamComposition", teamComposition);
      var distributionOfStores = [
        { name: "郑州", value: 9, percent: "10.47" },
        { name: "洛阳", value: 8, percent: "9.30" }
      ];
      this.$set(this, "distributionOfStores", distributionOfStores);
      var compositionOfIncome = [
        { name: "装修", value: 9, percent: "10.47" },
        { name: "二手房", value: 14, percent: "16.28" },
        { name: "新房", value: 8, percent: "9.30" },
        { name: "金融", value: 33, percent: "38.37" }
      ];
      this.$set(this, "compositionOfIncome", compositionOfIncome);
      var fatigueEffectArr = [
        { xData: "1月", value: 425 },
        { xData: "2月", value: 340 },
        { xData: "3月", value: 235 },
        { xData: "4月", value: 150 },
        { xData: "5月", value: 275 },
        { xData: "6月", value: 360 },
        { xData: "7月", value: 485 },
        { xData: "8月", value: 190 },
        { xData: "9月", value: 115 },
        { xData: "10月", value: 100 },
        { xData: "11月", value: 145 },
        { xData: "12月", value: 130 }
      ];
      this.$set(this, "fatigueEffectArr", fatigueEffectArr);
      var storeManagementArr = [
        { name: "<0", value: 3, percent: "" },
        { name: "<1万", value: 109, percent: "" },
        { name: "1-5万", value: 94, percent: "" },
        { name: "5万<", value: 197, percent: "" }
      ];
      this.$set(this, "storeManagementArr", storeManagementArr);
      var channelData = [
        {
          name: "门店成交量",
          innerName: null,
          value: 1320,
          percent: "91.92",
          list: [
            { name: "1月", value: 66, percent: null },
            { name: "2月", value: 44, percent: null },
            { name: "3月", value: 55, percent: null },
            { name: "4月", value: 44, percent: null },
            { name: "5月", value: 33, percent: null },
            { name: "6月", value: 22, percent: null },
            { name: "7月", value: 11, percent: null },
            { name: "8月", value: 55, percent: null },
            { name: "9月", value: 66, percent: null },
            { name: "10月", value: 77, percent: null },
            { name: "11月", value: 88, percent: null },
            { name: "12月", value: 99, percent: null }
          ]
        },
        {
          name: "线上成交量",
          innerName: null,
          value: 11,
          percent: "0.77",
          list: [
            { name: "1月", value: 12, percent: null },
            { name: "2月", value: 324, percent: null },
            { name: "3月", value: 23, percent: null },
            { name: "4月", value: 45, percent: null },
            { name: "5月", value: 55, percent: null },
            { name: "6月", value: 33, percent: null },
            { name: "7月", value: 67, percent: null },
            { name: "8月", value: 54, percent: null },
            { name: "9月", value: 48, percent: null },
            { name: "10月", value: 38, percent: null },
            { name: "11月", value: 29, percent: null },
            { name: "12月", value: 1, percent: null }
          ]
        }
      ];
      this.$set(this, "channelData", channelData);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/bossVersion/_basics";

.operate {
  line-height: 1;
  .plate {
    & > .item {
      width: 100%;
      height: 1.35rem;
      margin-bottom: 0.1rem;
      .bossVersion {
        font-size: 0.15rem;
      }
    }
    .room,
    .dealAmount {
      color: $color3;
      & > .itemData {
        @include flexFdcYcen;
        & > .top {
          margin-bottom: 0.2rem;
          text-align: center;
          & > span {
            @include bold(0.15rem);
          }
        }
        & > .bot {
          @include flexXjsbYcen;
          & > .li {
            width: calc(100% / 3);
            text-align: center;
            & > p:nth-of-type(1) {
              margin-bottom: 0.03rem;
              font-size: 0.12rem;
            }
            & > p:nth-of-type(2) {
              @include din(0.25rem);
              & > .units {
                margin-left: 0.03rem;
                font-size: 0.12rem;
              }
              & > .sign {
                margin-left: 0;
              }
            }
          }
        }
      }
    }
    .dealAmount {
      color: $color4;
      & > .itemData {
        & > .bot {
          & > .li {
            width: calc(100% / 4);
          }
        }
      }
    }
    .layered {
      @include flex;
      margin-bottom: 0.1rem;
      .dealQuota,
      .onLine {
        color: $color5;
        width: 1.725rem;
        height: 2.1rem;
        padding-top: 0.38rem;
        padding-left: 0.38rem;
        .top {
          margin-bottom: 0.1rem;
          & > .txt {
            & > span {
              @include bold(0.15rem);
            }
          }
          & > .num {
            margin-top: 0.05rem;
            @include din(0.25rem);
            & > .units {
              margin-left: 0.03rem;
              font-size: 0.12rem;
            }
          }
        }
        .bot {
          .txt {
            margin-bottom: 0.05rem;
            font-size: 0.12rem;
          }
          .num {
            @include flexYbase;
            @include din(0.19rem);
            & > .units {
              margin-left: 0.03rem;
              font-size: 0.12rem;
            }
            & > .sign {
              margin-left: 0;
            }
          }
        }
      }
      .onLine {
        margin-left: 0.1rem;
        color: $color1;
        .title {
          margin-top: 0.08rem;
          font-size: 0.12rem;
        }
        .rote {
          margin-top: 0.05rem;
        }
      }
    }
  }
  .chartItem {
    width: 100%;
    height: 1.65rem;
    .itemData {
      @include flexYcen;
      & > .left {
        width: calc(100% - 1.06rem);
        height: 100%;
      }
      & > em {
        width: 1px;
        height: 1.25rem;
        background-color: $color9;
      }
      & > .right {
        width: 1.06rem;
        & > p {
          color: $color1;
          font-size: 0.12rem;
          text-align: center;
          line-height: 1.5;
        }
      }
    }
    .storeData {
      & > .right {
        & > p {
          color: $color3;
        }
        & > .txt {
          font-size: 0.12rem;
        }
        & > .num {
          @include din(0.2rem);
          & > .units {
            font-size: 0.12rem;
          }
        }
        & > .rote {
          @include din(0.14rem);
          & > .units {
            font-size: 0.12rem;
          }
        }
      }
    }
    .chartTips {
      @include absoluteTLSide(0, 0, 1);
    }
  }
}
</style>
